<template>
  <div>

    <el-steps :active="active" simple>
      <el-step title="基本信息" icon="el-icon-edit" />
      <el-step title="用量参数" icon="el-icon-edit-outline" />
      <el-step title="精制工艺" icon="el-icon-document-copy" />
      <el-step title="防污措施" icon="el-icon-tickets" />
      <el-step title="评估结果" icon="el-icon-document-checked" />
    </el-steps>

    <div class="content">
      <base-information v-show="active<=0" ref="baseInformation" @listenChild="next" />
      <useage-parameter v-show="active==1" ref="useageParameter" @listenChild="next" @goBack="last" />
      <emission-factor v-show="active==2" ref="emissionFactor" @listenChild="next" @goBack="last" />
      <antifouling-measure v-show="active==3" ref="antifoulingMeasure" @listenChild="next" @goBack="last" />
      <daily-emissions v-show="active==4||active==5" ref="dailyEmissions" @listenChild="addDailyEmissionsToEvaluate" @goBack="last" />
    </div>

  </div>
</template>

<script>
import BaseInformation from './Steps/BaseInformation'
import UseageParameter from './Steps/UsageParameter'
import AntifoulingMeasure from './Steps/AntifoulingMeasure'
import EmissionFactor from './Steps/EmissionFactor'
import DailyEmissions from './Steps/DailyEmissions'

export default {
  components: {
    BaseInformation,
    UseageParameter,
    AntifoulingMeasure,
    EmissionFactor,
    DailyEmissions
  },
  data() {
    return {
      message: '',
      disabled_submit: true,
      active: 0,
      disabled_next: false,
      disabled_last: true,
      disabled_cal: true,
      disabled_save: true
    }
  },

  methods: {
    last() {
      this.active--
    },
    next() {
      this.active++
      if (this.active === 2) {
        this.$refs.emissionFactor.getPfxs()
      }
      if (this.active === 4) {
        this.$refs.dailyEmissions.setPfl()
      }
      console.log('this.$store.getters.getEvaluate', this.$store.getters.getEvaluate)
    },
    addDailyEmissionsToEvaluate() {
      this.$api.evaluate.addEvaluate(this.$store.getters.getEvaluate).then((res) => {
        console.log('添加：', res.msg)
        if (res.msg != 'fail') {
          this.$router.push({ path: '/success' })
        } else {
          this.$message('CAS号已存在，无法插入')
        }
      })
      console.log('this.$store.getters.getEvaluate', this.$store.getters.getEvaluate)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
};
  .content{
    position:absolute;
    top:10%;
    left:10%;
    right:10%;
  }
  .top{
    position:absolute;
    top:80%;
    left:50%;
    right:5%;
  }
</style>
